<template>
	<block>
		<!-- 局部loading -->
		<block v-if="loadingType == 'local'">
			<view class="localLoading">
				<view><image src="https://staticv3.youzy.cn/images/ad/miniapp/cmp/loading_icon1.gif"></image></view>
			</view>
		</block>
		<!-- 整个页面loading -->
		<block v-else-if="loadingType == 'all'">
			<view class="loadingComponents"><image src="https://staticv3.youzy.cn/images/ad/miniapp/cmp/loading_icon1.gif"></image></view>
		</block>
		<!-- 弹框loading -->
		<block v-if="loadingType == 'popup'">
			<view class="popupLoading">
				<view><image src="https://staticv3.youzy.cn/images/ad/miniapp/cmp/loading_icon1.gif"></image></view>
			</view>
		</block>
	</block>
</template>

<script>
export default {
	props: {
		loadingText: {
			type: String,
			default: ""
		},
		loadingType: {
			type: String,
			default: "all"
		}
	}
};
</script>

<style scoped>
.loadingComponents > view > view {
	margin-top: 5vw;
}
.loadingComponents {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
image {
	width: 28.06vw;
	height: 25.14vw;
}
/* 局部loading */
.localLoading {
	width: 100vw;
	height: 50vw;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

/* 弹框loading */
.popupLoading {
	position: fixed;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
	top: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 100;
}
.popupLoading view {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 40vw;
	background: #fff;
	height: 40vw;
}
</style>
